<!-- 我的出租/求租信息 -->
<template>
  <view class="rental-info">
    <view class="container">
      <u-tabs
        :list="tabList"
        :current="current"
        @change="tabChange" 
        :is-scroll="false"
      ></u-tabs>

      <!-- 内容区域 -->
      <view class="content">
        <!-- 我的求租 -->
        <view v-if="current === 0">
          <rental-wanted
            v-if="isLoaded"
            :list="list"
            :currentType="currentType"
            @getCurrentTypeList="getCurrentTypeList"
          ></rental-wanted>
        </view>
        <!-- 我的出租 -->
        <view v-if="current === 1">
          <rental-listing
            v-if="isLoaded"
            :list="list"
            :currentType="currentType"
          ></rental-listing>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import RentalWanted from "@/components/rental-wanted.vue";
import RentalListing from "@/components/rental-listing.vue";

export default {
  components: {
    RentalWanted,
    RentalListing,
  },
  data() {
    return {
      current: 0,
      isLoaded: false,
      tabList: [{ name: "我的求租" }, { name: "我的出租" }],
      currentType: "",
      list: [],
    };
  },
  onLoad(options) {
    this.currentType = options.type;
    console.log(this.currentType);
    if (this.currentType == "All") {
      this.tabList = [{ name: "求租信息" }, { name: "出租信息" }];
    } else {
      this.tabList = [{ name: "我的求租" }, { name: "我的出租" }];
    }
    this.getCurrentTypeList();
  },
  methods: {
    getCurrentTypeList() {
      if (this.currentType === "self") {
        uni.showLoading({
          title: "加载中...",
          mask: true,
        });
        this.$httpReq
          .getQueryOneselfList({
            messageType: this.current == 0 ? "RENT_REQUEST" : "RENT_OFFER",
          })
          .then((res) => {
            this.list = res.data;
            uni.hideLoading();
          });
      } else {
        uni.showLoading({
          title: "加载中...",
          mask: true,
        });
        this.$httpReq
          .getAllMessageList({
            messageType: this.current == 0 ? "RENT_REQUEST" : "RENT_OFFER",
          })
          .then((res) => {
            this.list = res.data.list;
            uni.hideLoading();
          });
      }
    },
    tabChange(data) {
      this.current = data.index;
      this.getCurrentTypeList();
    },
  },
  mounted() {
    this.isLoaded = true;
  },
};
</script>

<style lang="scss" scoped>
.rental-info {
  .content {
    width: 100%;
    height: 100vh;
    background: #f7f7f7;
    padding-top: 20rpx;
    box-sizing: border-box;
  }
}
</style> 